<!doctype html>
<!--
 * Jodit Editor (https://xdsoft.net/jodit/)
 * License https://xdsoft.net/jodit/license.html
 * Copyright 2013-2018 Valeriy Chupurnov https://xdsoft.net
-->
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Jodit Example - Custom Icons</title>
    <link rel="icon" type="image/png" href="assets/icon.png" />
</head>
<body>
<header>
    <nav>
        <ul class="container">
            <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
            <li><a href="https://xdsoft.net/jodit/play.html">Playground</a></li>
            <li><a href="https://xdsoft.net/jodit/doc/">Documentation</a></li>
            <li><a href="https://github.com/xdan/jodit/">Github</a></li>
            <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
            <li>
                <a href="javascript:void(0)">Examples</a>
                <ul id="examples"><!-- see app.js--></ul>
            </li>
            <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
        </ul>
    </nav>
</header>
<div id="main_container" class="container">
    <div id="introduction">
        <h3>HTML</h3>
        <pre><code class="language-markup">
            &lt;script src="https://use.fontawesome.com/c1f20c2bd7.js"&gt;&lt;/script&gt;
            &lt;textarea id="editor">&lt;/textarea>
        </code></pre>
        <h3>JavaScript</h3>
        <pre><code class="language-javascript">
            var editor = new Jodit('#editor', {
               events: {
                   getIcon: function (name, control, clearName) {
                       var code = clearName;

                       switch (clearName) {
                           case 'redo':
                               code = 'rotate-right';
                               break;
                           case 'video':
                               code = 'video-camera';
                               break;
                           case 'copyformat':
                               code = 'clone';
                               break;
                           case 'about':
                               code = 'question';
                               break;
                           case 'selectall':
                               code = 'legal';
                               break;
                           case 'symbol':
                               return '<span style="text-align: center;font-size:14px;">Ω</span>';
                           case 'hr':
                               code = 'minus';
                               break;
                           case 'left':
                           case 'right':
                           case 'justify':
                           case 'center':
                               code = 'align-' + name;
                               break;
                           case 'brush':
                               code = 'tint';
                               break;
                           case 'fontsize':
                               code = 'text-height';
                               break;
                           case 'ul':
                           case 'ol':
                               code = 'list-' + name;
                               break;
                           case 'source':
                               code = 'code';
                               break;
                       }

                       return '<i style="font-size:14px" class="fa fa-' + code + ' fa-xs"></i>';
                   }
               }
            });
            editor.setEditorValue('&lt;p>start&lt;/p>')
        </code></pre>
    </div>
    <div class="result">
        <textarea id="area_editor"></textarea>
    </div>
</div>
<footer>
    <nav>
        <ul class="container">
            <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li>
            <li><a href="https://xdsoft.net/jodit/play.html">Playground</a></li>
            <li><a href="https://xdsoft.net/jodit/doc/">Documentation</a></li>
            <li><a href="https://github.com/xdan/jodit/">Github</a></li>
            <li><a href="https://github.com/xdan/jodit/releases">Changelog</a></li>
            <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li>
        </ul>
    </nav>
</footer>
</body>
<link rel="stylesheet" href="../build/jodit.min.css"/>
<link rel="stylesheet" href="assets/app.css"/>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet">
<script src="https://use.fontawesome.com/c1f20c2bd7.js"></script>

<script src="../build/jodit.min.js"></script>
<script src="assets/prism.js"></script>
<script src="assets/app.js"></script>
<script>
    var editor = new Jodit('#area_editor', {
       events: {
           getIcon: function (name, control, clearName) {
               var code = clearName;

               switch (clearName) {
                   case 'redo':
                       code = 'rotate-right';
                       break;
                   case 'video':
                       code = 'video-camera';
                       break;
                   case 'copyformat':
                       code = 'clone';
                       break;
                   case 'about':
                       code = 'question';
                       break;
                   case 'selectall':
                       code = 'legal';
                       break;
                   case 'symbol':
                       return '<span style="text-align: center;font-size:14px;">Ω</span>';
                   case 'hr':
                       code = 'minus';
                       break;
                   case 'left':
                   case 'right':
                   case 'justify':
                   case 'center':
                       code = 'align-' + name;
                       break;
                   case 'brush':
                       code = 'tint';
                       break;
                   case 'fontsize':
                       code = 'text-height';
                       break;
                   case 'ul':
                   case 'ol':
                       code = 'list-' + name;
                       break;
                   case 'source':
                       code = 'code';
                       break;
               }

               return '<i style="font-size:14px" class="fa fa-' + code + ' fa-xs"></i>';
           }
       }
    });
</script>
</html>
